<template>
  <div class="warehouse_plan_view_wrap pos_rel w_p_100 flex_col">
    <ware-house-title></ware-house-title>

    <div class="flex_row jc_spa_bet ai_cen pw_20">
      <div class="left">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
          <el-form-item label="物料名称">
            <el-input v-model="form.name" placeholder="请输入物料名称"></el-input>
          </el-form-item>
          <el-form-item label="批次">
            <el-select v-model="form.batch" placeholder="请选择批次">
              <el-option label="批次一" value="shanghai"></el-option>
              <el-option label="批次二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="m_l_30">
            <el-button type="primary" @click="handleSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right flex_row">
        <div class="flex_row_cen m_r_15" v-for="(item,index) in legendList" :key="index">
          <div :style="{backgroundColor:item.backgroundColor}" class="w_50 h_15"></div>
          <span class="color_white m_l_5">{{ item.text }}</span>
        </div>
      </div>
    </div>

    <div class="flex_row pw_20 flex_wrap m_t_20">
      <div class="area_wrap flex_col" v-for="(area,index) in DATA_LIST" :key="index" :class="area.className">
        <h1>{{ area.areaNo }}区</h1>
        <div class="shelves_wrap flex_col" v-for="(shelves,index) in area.shelvesList" :key="index">
          <div class="location_wrap flex_row" v-for="(location,index) in shelves.locationList" :key="index">
            <div class="seat_wrap ehn" v-for="(seat,index) in location.seatList" :key="index"
                 :class="{'active':showResult(seat.seatNo)}">
              <el-tooltip class="" effect="dark" :content="seat.seatNo" placement="top-start">
                <span>{{ seat.seatNo }}</span>
              </el-tooltip>
            </div>
          </div>
          <div class="divider"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NumberUtils from "@/utils/number-utils"
import WareHouseTitle from "../components/ware-house-title/index"
import {DATA_LIST, ACTIVE_DATA_LIST} from "./data"

export default {
  name: 'DateScreen',
  components: {
    WareHouseTitle,
  },
  data() {
    return {
      DATA_LIST,
      form: {},
      legendList: [{
        backgroundColor: `#00b6ff`,
        text: `占用`,
      }, {
        backgroundColor: `darkgray`,
        text: `空闲`,
      }],
      activeNo: null,
      activeNoList: [],
    }
  },
  computed: {},
  created() {
    console.log(this.DATA_LIST)
  },
  methods: {
    handleSubmit() {
      this.activeNoList = []
      for (let i = 0; i < 4; i++) {
        let num = NumberUtils.generateRandomInteger(0, ACTIVE_DATA_LIST.length + 1)
        this.activeNoList.push(ACTIVE_DATA_LIST[num])
      }
    },
    showResult(seatNo) {
      return this.activeNoList.includes(seatNo)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/basic.scss";

.warehouse_plan_view_wrap {
  background: url("../../assets/images/dataScreen/data_screen_bg.png") center/cover no-repeat;

  .area_wrap {
    background-color: #00b6ff;

    > h1 {
      text-align: center;
      color: #fff;
      background-color: #cd622e;
    }

    &.w_p_70 {
      border-right: 5px solid #cd622e;
    }

    .seat_wrap {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 1px;
      padding: 4px 8px;
      background-color: darkgray;
      min-width: 50px;
      width: 100%;
      cursor: pointer;

      &.active {
        background-color: #2ac06d;
      }

      &.occupy {
        background-color: #00b6ff;
      }
    }

    .divider {
      height: 5px;
      background-color: #5a5e66;
    }
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
